<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>AI 自驾旅程规划助手</title>
  <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
  <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
  <style>
    html,
    body {
      height: 100%;
      margin: 0
    }

    #map {
      height: 100%;
      width: 100%;
      position: relative;
      z-index: 0
    }

    .input-bubble {
      position: absolute;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      background: #fff;
      border-radius: 20px;
      padding: 10px 15px;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
      display: flex;
      align-items: center;
      cursor: pointer;
      z-index: 900;
      pointer-events: auto;
      width: 50vw;
      max-width: 50vw;
      transition: width .18s ease
    }

    .input-bubble textarea {
      border: 0;
      outline: none;
      font-size: 14px;
      flex: 1;
      display: none;
      resize: none;
      background: transparent;
      line-height: 1.35;
      min-height: 1.25em;
      max-height: 33vh;
      overflow-y: auto;
      overflow-x: hidden;
      white-space: pre-wrap;
      word-break: break-word
    }

    .input-bubble span {
      font-size: 15px;
      color: #333
    }

    /* 行程按钮：右上角 */
    .panel-btn {
      position: fixed;
      top: 10px;
      right: 12px;
      background: #007bff;
      color: #fff;
      border: 0;
      border-radius: 6px;
      padding: 6px 10px;
      z-index: 1001
    }

    @media (max-width:600px) {
      .panel-btn {
        top: max(8px, calc(8px + env(safe-area-inset-top)));
        right: 12px;
      }
    }

    /* 覆盖层（在抽屉打开时激活） */
    .drawer-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.32);
      z-index: 1000;
      display: none
    }

    /* 行程抽屉：默认隐藏在右侧，宽度为 80%（移动）或 360px（桌面） */
    .itinerary-drawer {
      position: fixed;
      top: 0;
      right: 0;
      height: 100%;
      width: 80%;
      max-width: 360px;
      background: #fff;
      box-shadow: -6px 0 18px rgba(0, 0, 0, 0.12);
      transform: translateX(100%);
      transition: transform 240ms ease-in-out;
      z-index: 1002;
      overflow: auto;
      padding: 16px;
      font-size: 14px
    }

    .itinerary-drawer.open {
      transform: translateX(0)
    }

    .poi-popup {
      font-size: 14px
    }

    .route-info {
      position: absolute;
      top: 100px;
      left: 10px;
      background: rgba(255, 255, 255, 0.95);
      padding: 10px 12px;
      border-radius: 8px;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
      z-index: 1000;
      min-width: 140px;
      line-height: 1.3
    }

    /* 旅行装备按钮（左下角浮动，在同路人按钮上方） */
    .equipment-btn {
      position: absolute;
      left: 12px;
      bottom: 148px;
      z-index: 1001;
      background: #ffffff;
      border: 1px solid #e5e5e5;
      border-radius: 24px;
      padding: 8px 12px;
      color: #333;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
      display: flex;
      align-items: center;
      gap: 6px;
      cursor: pointer;
    }

    .equipment-btn:hover {
      background: #f9f9f9
    }

    /* 同路人按钮（左下角浮动） */
    .companions-btn {
      position: absolute;
      left: 12px;
      bottom: 84px;
      z-index: 1001;
      background: #ffffff;
      border: 1px solid #e5e5e5;
      border-radius: 24px;
      padding: 8px 12px;
      color: #333;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
      display: flex;
      align-items: center;
      gap: 6px;
      cursor: pointer;
    }

    .companions-btn:hover {
      background: #f9f9f9
    }

    .profile-btn {
      position: absolute;
      left: 12px;
      bottom: 20px;
      z-index: 1001;
      background: #ffffff;
      border: 1px solid #e5e5e5;
      border-radius: 24px;
      padding: 8px 16px;
      color: #333;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px
    }

    .profile-btn:hover {
      background: #f9f9f9
    }

    .btn-icon {
      font-size: 16px;
      line-height: 1
    }

    /* 编辑模式样式 */
    .mini-btn {
      display: inline-block;
      border: 1px solid #ccc;
      background: #f8f8f8;
      color: #333;
      border-radius: 12px;
      padding: 0 6px;
      line-height: 20px;
      font-size: 12px;
      margin: 0 4px;
      cursor: pointer
    }

    .event-row {
      display: flex;
      align-items: center;
      gap: 6px
    }

    .event-row.draggable {
      cursor: move
    }

    .event-row.drag-over {
      background: #f0f7ff;
      border-radius: 6px
    }

    .day-dropzone {
      height: 10px;
      margin: 6px 0;
      border: 2px dashed transparent;
      border-radius: 6px
    }

    .day-dropzone.active {
      border-color: #a6c8ff;
      background: #f5f9ff
    }

    .touch-ghost {
      position: fixed;
      z-index: 2000;
      pointer-events: none;
      background: #fff;
      border: 1px solid #ddd;
      border-radius: 6px;
      padding: 6px 8px;
      box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
      opacity: 0.95;
      max-width: 80vw
    }

    /* 在小屏幕上，抽屉宽度为 86% 并保持在底部输入气泡上方 */
    @media (max-width:600px) {
      .itinerary-drawer {
        width: 86%
      }

      /* 居中且更窄：占屏幕宽度一半；仅上下扩展，不左右扩展 */
      .input-bubble {
        bottom: 20px;
        bottom: calc(20px + env(safe-area-inset-bottom));
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        width: 50vw;
        max-width: 50vw;
        min-width: unset;
        box-sizing: border-box;
      }

      /* 左下角按钮整体下移一些 */
      .profile-btn {
        bottom: 20px;
        bottom: calc(20px + env(safe-area-inset-bottom));
      }

      .companions-btn {
        bottom: 100px;
      }

      .equipment-btn {
        bottom: 164px;
      }

      .input-bubble textarea {
        width: 100%;
      }

      /* 移动端：旅行装备/同路人/我 仅显示图标，隐藏文字 */
      .equipment-btn,
      .companions-btn,
      .profile-btn {
        font-size: 0;
        padding: 10px;
        gap: 0;
        border-radius: 24px
      }

      .equipment-btn .btn-icon,
      .companions-btn .btn-icon,
      .profile-btn .btn-icon {
        font-size: 18px
      }
    }

    /* 同路人页面（全屏覆盖） */
    .companions-page {
      position: fixed;
      inset: 0;
      background: #fff;
      z-index: 1100;
      display: none;
      overflow: auto
    }

    .companions-page.open {
      display: block
    }

    .companions-header {
      position: sticky;
      top: 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px 14px;
      border-bottom: 1px solid #eee;
      background: #fff;
      z-index: 1
    }

    .companions-header .title {
      font-weight: 700
    }

    .companions-list {
      padding: 12px 14px
    }

    .companions-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 12px;
      border: 1px solid #eee;
      border-radius: 10px;
      margin-bottom: 10px
    }

    .companions-add-btn {
      background: #007bff;
      color: #fff;
      border: 0;
      border-radius: 18px;
      padding: 6px 10px;
      cursor: pointer
    }

    .companions-close-btn {
      background: #f4f4f4;
      border: 1px solid #ddd;
      border-radius: 18px;
      padding: 6px 10px;
      cursor: pointer
    }

    /* 聊天页面 */
    .chat-page {
      position: fixed;
      inset: 0;
      background: #fff;
      z-index: 1200;
      display: none;
      overflow: auto
    }

    .chat-page.open {
      display: block
    }

    .chat-header {
      position: sticky;
      top: 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px 14px;
      border-bottom: 1px solid #eee;
      background: #fff;
      z-index: 1
    }

    .chat-title {
      font-weight: 700
    }

    .chat-close-btn {
      background: #f4f4f4;
      border: 1px solid #ddd;
      border-radius: 18px;
      padding: 6px 10px;
      cursor: pointer
    }

    .chat-messages {
      padding: 12px 14px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-bottom: 56px;
      box-sizing: border-box;
      overflow-x: hidden
    }

    .msg {
      max-width: 85%;
      padding: 8px 10px;
      border-radius: 12px;
      line-height: 1.3;
      word-break: break-word;
      box-sizing: border-box
    }

    .msg.me {
      align-self: flex-end;
      background: #daf1ff
    }

    .msg.them {
      align-self: flex-start;
      background: #f2f2f2
    }

    .msg .msg-sender {
      font-size: 11px;
      color: #666;
      margin-bottom: 4px;
      opacity: 0.9
    }

    .chat-input-bar {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      background: #fff;
      border-top: 1px solid #eee;
      display: flex;
      gap: 8px;
      align-items: center;
      padding: 8px 10px;
      z-index: 2
    }

    .chat-input-bar input {
      flex: 1;
      border: 1px solid #ddd;
      border-radius: 18px;
      padding: 8px 12px
    }

    .chat-send-btn {
      background: #007bff;
      color: #fff;
      border: 0;
      border-radius: 18px;
      padding: 8px 12px;
      cursor: pointer
    }

    .chat-more-btn {
      background: #f4f4f4;
      border: 1px solid #ddd;
      border-radius: 18px;
      padding: 8px 12px;
      cursor: pointer
    }

    /* 底部弹出分享面板 */
    .sheet-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.35);
      z-index: 1300;
      display: none
    }

    .sheet-overlay.open {
      display: block
    }

    .sheet {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      background: #fff;
      border-radius: 12px 12px 0 0;
      box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.2);
      padding: 12px
    }

    .sheet-title {
      font-weight: 700;
      margin-bottom: 8px
    }

    .sheet-actions {
      display: flex;
      flex-direction: column;
      gap: 8px
    }

    .sheet-action {
      padding: 10px 12px;
      border: 1px solid #eee;
      border-radius: 10px;
      background: #fff;
      cursor: pointer;
      text-align: left
    }

    .sheet-action:hover {
      background: #f9f9f9
    }

    .sheet-cancel {
      margin-top: 8px;
      padding: 10px 12px;
      border: 1px solid #ddd;
      border-radius: 10px;
      background: #f6f6f6;
      cursor: pointer
    }

    .sheet-list {
      display: flex;
      flex-direction: column;
      gap: 8px
    }

    /* 从聊天进入编辑时的高亮效果 */
    .itinerary-drawer li.editing-from-chat {
      outline: 2px solid #2b8cff;
      box-shadow: 0 0 0 3px rgba(43, 140, 255, 0.25);
      transition: outline-color 1.2s ease, box-shadow 1.2s ease
    }

    /* 顶部中间 预览版 徽标 */
    .beta-badge {
      position: fixed;
      top: 10px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 1100;
      pointer-events: none;
      background: rgba(0, 0, 0, 0.65);
      color: #fff;
      font-weight: 700;
      font-size: 12px;
      letter-spacing: 1px;
      padding: 6px 10px;
      border-radius: 999px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
      backdrop-filter: blur(2px);
    }

    @media (max-width:600px) {
      .beta-badge {
        top: 8px;
        font-size: 11px;
        padding: 5px 9px;
      }
    }

    /* 规划中动画（小圆环） */
    .spinner {
      width: 16px;
      height: 16px;
      border: 2px solid #e5eaf0;
      border-top-color: #2b8cff;
      border-radius: 50%;
      animation: spin .9s linear infinite;
      margin-left: 8px;
      flex: 0 0 auto;
    }

    @keyframes spin {
      to {
        transform: rotate(360deg);
      }
    }

    /* Feedback button: hidden globally; use 合规菜单中的“反馈” */
    #fbBtn {
      display: none !important
    }

    /* Compliance links: use a single FAB + popup on all devices; hide legacy pill nav */
    nav[aria-label="合规与帮助"] {
      display: none !important
    }

    /* Floating feedback button hidden on all devices */
    #complianceFab {
      display: inline-block;
      position: fixed;
      right: 12px;
      bottom: 20px;
      z-index: 900;
      background: transparent;
      border: 1px solid transparent;
      color: #2563eb;
      border-radius: 14px;
      padding: 6px 10px;
      font-size: 12px;
      box-shadow: none
    }

    @media (max-width:600px) {
      #complianceFab {
        right: 12px;
        bottom: calc(20px + env(safe-area-inset-bottom));
      }
    }

    #complianceMenu {
      display: none;
      position: fixed;
      right: 8px;
      bottom: 44px;
      z-index: 950;
      background: #fff;
      border: 1px solid #e5e7eb;
      border-radius: 10px;
      box-shadow: 0 8px 18px rgba(0, 0, 0, .15);
      padding: 6px;
      min-width: 160px
    }

    @media (max-width:600px) {
      #complianceMenu {
        right: 12px;
        bottom: calc(44px + env(safe-area-inset-bottom));
      }
    }

    #complianceMenu.open {
      display: block
    }

    #complianceMenu a {
      display: block;
      padding: 6px 8px;
      font-size: 12px;
      color: #2563eb;
      text-decoration: none;
      border-radius: 8px
    }

    #complianceMenu a:hover {
      background: #f3f4f6
    }
  </style>
</head>

<body>
  <div class="beta-badge" aria-label="预览版">预览版</div>
  <div id="map"></div>

  <div id="routeInfo" class="route-info" style="display:none"></div>

  <button class="panel-btn" id="panelBtn" aria-controls="itineraryDrawer" aria-expanded="false">行程</button>
  <div class="drawer-overlay" id="drawerOverlay" role="presentation"></div>
  <aside class="itinerary-drawer" id="itineraryDrawer" aria-hidden="true">
    <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;gap:8px">
      <div style="font-weight:700">行程概览</div>
      <button id="closeItineraryBtn" class="companions-close-btn" aria-label="关闭">关闭</button>
    </div>
    <ul id="itineraryList" style="list-style:none;padding:0;margin:0"></ul>
  </aside>

  <div class="input-bubble" onclick="expandInput()">
    <span id="placeholder">你想去哪里…</span>
    <textarea id="tripInput" placeholder="输入行程需求后按回车；Shift+回车换行（例如：国庆假期周边游，杭州出发，3天两晚，2大2小，最后回杭）" rows="2"></textarea>
    <span id="planningSpinner" class="spinner" aria-hidden="true" style="display:none"></span>
  </div>

  <button id="equipmentBtn" class="equipment-btn"><span class="btn-icon" aria-hidden="true">🎒</span>旅行装备</button>
  <button id="companionsBtn" class="companions-btn" aria-controls="companionsPage" aria-expanded="false"><span
      class="btn-icon" aria-hidden="true">👥</span>同路人</button>
  <button id="profileBtn" class="profile-btn" aria-controls="profilePage" aria-expanded="false"><span class="btn-icon"
      aria-hidden="true">👤</span>我</button>

  <section id="companionsPage" class="companions-page" aria-hidden="true">
    <div class="companions-header">
      <div class="title">同路人</div>
      <div style="display:flex;gap:8px">
        <button id="searchCompanionBtn" class="companions-add-btn">🔍 寻找</button>
        <button id="createGroupBtn" class="companions-add-btn">建群</button>
        <button id="addCompanionBtn" class="companions-add-btn">＋</button>
        <button id="closeCompanionsBtn" class="companions-close-btn">关闭</button>
      </div>
    </div>
    <div class="companions-list" id="companionsList"></div>
    <div class="companions-list">
      <div style="font-weight:700;margin:8px 0">我的群聊</div>
      <div id="groupsList"></div>
    </div>
  </section>

  <section id="chatPage" class="chat-page" aria-hidden="true">
    <div class="chat-header">
      <div class="chat-title" id="chatTitle">聊天</div>
      <div style="display:flex;gap:8px">
        <button id="closeChatBtn" class="chat-close-btn">关闭</button>
      </div>
    </div>
    <div id="chatMessages" class="chat-messages"></div>
    <div class="chat-input-bar">
      <input id="chatInput" placeholder="发送消息…" />
      <button id="sendChatBtn" class="chat-send-btn">发送</button>
      <button id="chatPlusBtn" class="chat-more-btn" title="更多">＋</button>
    </div>
  </section>

  <section id="chatShareOverlay" class="sheet-overlay" aria-hidden="true">
    <div class="sheet" role="dialog" aria-label="分享">
      <div class="sheet-title">聊天内分享</div>
      <div class="sheet-actions">
        <button id="shareItineraryBtn" class="sheet-action">分享行程卡片</button>
      </div>
      <button id="shareCancelBtn" class="sheet-cancel">取消</button>
    </div>
  </section>

  <section id="chatShareItinOverlay" class="sheet-overlay" aria-hidden="true">
    <div class="sheet" role="dialog" aria-label="选择行程">
      <div class="sheet-title">选择要分享的行程</div>
      <div id="shareItinList" class="sheet-list"></div>
      <button id="shareItinCancelBtn" class="sheet-cancel">取消</button>
    </div>
  </section>

  <section id="itinShareOverlay" class="sheet-overlay" aria-hidden="true">
    <div class="sheet" role="dialog" aria-label="分享行程">
      <div class="sheet-title">分享行程到</div>
      <div class="sheet-actions">
        <button id="itinShareToCompanionBtn" class="sheet-action">同路人</button>
        <button id="itinShareToGroupBtn" class="sheet-action">群聊</button>
        <!-- Mobile-specific options -->
        <button id="itinShareWxFriendBtn" class="sheet-action" style="display:none">微信好友</button>
        <button id="itinShareWxMomentsBtn" class="sheet-action" style="display:none">微信朋友圈</button>
        <!-- Desktop or fallback option -->
        <button id="itinShareToWxBtn" class="sheet-action">微信/复制链接</button>
      </div>
      <button id="itinShareCancelBtn" class="sheet-cancel">取消</button>
    </div>
  </section>

  <section id="itinPickOverlay" class="sheet-overlay" aria-hidden="true">
    <div class="sheet" role="dialog" aria-label="选择目标">
      <div class="sheet-title" id="itinPickTitle">选择</div>
      <div id="itinPickList" class="sheet-list"></div>
      <button id="itinPickCancelBtn" class="sheet-cancel">取消</button>
    </div>
  </section>

  <section id="profilePage" class="companions-page" aria-hidden="true">
    <div class="companions-header">
      <div id="profileTitle" class="title">我的</div>
      <div>
        <button id="closeProfileBtn" class="companions-close-btn">关闭</button>
      </div>
    </div>
    <div id="profileContent" class="companions-list"></div>
  </section>

  <script>
    (function () {
      const host = location.hostname;
      const isLocal = host === '127.0.0.1' || host === 'localhost';
      // Build/Runtime switch to control fallback UI wiring
      // Default: disabled. Enable in dev with ?fallback=1 or localStorage.setItem('enableFallback','1')
      const enableFallback = !!(isLocal && (/[?&]fallback=1\b/.test(location.search) || localStorage.getItem('enableFallback') === '1'));
      window.APP_CONFIG = { apiBase: isLocal ? 'http://127.0.0.1:9000' : '/api', enableFallback };
    })();
    // Lightweight traffic beacon
    (function () {
      try {
        const api = (window.APP_CONFIG && window.APP_CONFIG.apiBase) ? String(window.APP_CONFIG.apiBase).replace(/\/$/, '') : '';
        const payload = { path: location.pathname, ref: document.referrer || '', title: document.title || '' };
        fetch(api + '/rum/collect', {
          method: 'POST',
          keepalive: true,
          credentials: 'include',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(payload)
        }).catch(() => { });
      } catch (_) { }
    })();
  </script>
  <script type="module" src="src/app/legacyMain.js"></script>
  <!-- AMap proxy security pre-config (no secret in frontend). The SDK itself is loaded dynamically in legacyMain.js -->
  <script>
    (function () {
      try { window._AMapSecurityConfig = window._AMapSecurityConfig || {}; window._AMapSecurityConfig.serviceHost = '/_AMapService'; } catch (e) { }
    })();
  </script>
  <button id="fbBtn" type="button" aria-label="反馈">反馈</button>
  <button id="complianceFab" type="button" aria-expanded="false" aria-controls="complianceMenu" aria-label="合规与帮助"
    title="合规与帮助">合规与帮助</button>
  <div id="complianceMenu" role="menu" aria-hidden="true">
    <a href="privacy.html" role="menuitem">隐私</a>
    <a href="terms.html" role="menuitem">用户协议</a>
    <a href="cookie.html" role="menuitem">Cookie/SDK</a>
    <a href="minor.html" role="menuitem">未成年人</a>
    <a href="complaint.html" role="menuitem">投诉举报</a>
    <a id="complianceFeedbackLink" href="#" role="menuitem">反馈</a>
    <a href="about.html" role="menuitem">关于</a>
    <a href="licenses.html" role="menuitem">致谢</a>
  </div>
  <!-- Legacy compliance nav removed: using single 合规 FAB + popup menu across devices -->
  <script>
    // Compact mobile compliance menu toggle
    (function () {
      const fab = document.getElementById('complianceFab');
      const menu = document.getElementById('complianceMenu');
      if (!fab || !menu) return;
      function close() { menu.classList.remove('open'); menu.setAttribute('aria-hidden', 'true'); fab.setAttribute('aria-expanded', 'false'); }
      function open() { menu.classList.add('open'); menu.setAttribute('aria-hidden', 'false'); fab.setAttribute('aria-expanded', 'true'); }
      fab.addEventListener('click', (e) => { e.stopPropagation(); if (menu.classList.contains('open')) close(); else open(); });
      document.addEventListener('click', (e) => { if (!menu.classList.contains('open')) return; const t = e.target; if (t && (t.id === 'complianceFab' || menu.contains(t))) return; close(); });
      window.addEventListener('resize', close);
    })();
  </script>
  <!-- Fallback UI wiring: activates only if main module is not ready -->
  <script>
    (function () {
      // Respect build/runtime flag and main app readiness
      var cfg = (window.APP_CONFIG || {});
      var allowFallback = !!cfg.enableFallback;
      if (!allowFallback || window.__APP_MAIN_READY) return;
      // 1) 输入框展开
      window.expandInput = function () {
        try {
          const bubble = document.querySelector('.input-bubble');
          const ta = document.getElementById('tripInput');
          const ph = document.getElementById('placeholder');
          if (!bubble || !ta) return;
          if (ph) ph.style.display = 'none';
          ta.style.display = 'block';
          ta.focus();
          bubble.style.cursor = 'text';
        } catch { }
      };
      // 2) 行程抽屉开合
      const panelBtn = document.getElementById('panelBtn');
      const drawer = document.getElementById('itineraryDrawer');
      const drawerOverlay = document.getElementById('drawerOverlay');
      const closeItineraryBtn = document.getElementById('closeItineraryBtn');
      function openDrawer() { if (!drawer || !drawerOverlay) return; drawer.classList.add('open'); drawer.setAttribute('aria-hidden', 'false'); drawerOverlay.style.display = 'block'; panelBtn && panelBtn.setAttribute('aria-expanded', 'true'); }
      function closeDrawer() { if (!drawer || !drawerOverlay) return; drawer.classList.remove('open'); drawer.setAttribute('aria-hidden', 'true'); drawerOverlay.style.display = 'none'; panelBtn && panelBtn.setAttribute('aria-expanded', 'false'); }
      if (panelBtn) panelBtn.addEventListener('click', openDrawer);
      if (closeItineraryBtn) closeItineraryBtn.addEventListener('click', closeDrawer);
      if (drawerOverlay) drawerOverlay.addEventListener('click', closeDrawer);
      // 3) 同路人 / 我 页面
      const companionsBtn = document.getElementById('companionsBtn');
      const companionsPage = document.getElementById('companionsPage');
      const closeCompanionsBtn = document.getElementById('closeCompanionsBtn');
      const profileBtn = document.getElementById('profileBtn');
      const profilePage = document.getElementById('profilePage');
      const closeProfileBtn = document.getElementById('closeProfileBtn');
      function openPage(el) { if (el) { el.classList.add('open'); el.setAttribute('aria-hidden', 'false'); } }
      function closePage(el) { if (el) { el.classList.remove('open'); el.setAttribute('aria-hidden', 'true'); } }
      if (companionsBtn) companionsBtn.addEventListener('click', () => openPage(companionsPage));
      if (closeCompanionsBtn) closeCompanionsBtn.addEventListener('click', () => closePage(companionsPage));
      if (profileBtn) profileBtn.addEventListener('click', () => openPage(profilePage));
      if (closeProfileBtn) closeProfileBtn.addEventListener('click', () => closePage(profilePage));
      // 4) 底部面板空白点击关闭
      function wireSheetOverlay(id) {
        const overlay = document.getElementById(id);
        if (!overlay) return;
        overlay.addEventListener('click', (e) => {
          const sheet = overlay.querySelector('.sheet');
          if (!sheet) return;
          if (!sheet.contains(e.target)) { overlay.classList.remove('open'); overlay.setAttribute('aria-hidden', 'true'); }
        });
      }
      ['itinShareOverlay', 'itinPickOverlay', 'chatShareOverlay', 'chatShareItinOverlay'].forEach(wireSheetOverlay);
      // 5) 同路人/我 间距：移动端=同路人高度 1/3，桌面端=同路人高度 1/2
      function isMobile() { return window.matchMedia && window.matchMedia('(max-width:600px)').matches; }
      function adjustMobileButtons() {
        try {
          const cb = document.getElementById('companionsBtn'); const pb = document.getElementById('profileBtn');
          if (!cb || !pb) return;
          const cRect = cb.getBoundingClientRect(); const pRect = pb.getBoundingClientRect();
          const cH = Math.max(36, Math.round(cRect.height)); const pH = Math.max(36, Math.round(pRect.height));
          const base = 20; const gap = Math.round(cH * (isMobile() ? 1 / 3 : 1 / 2));
          pb.style.bottom = base + 'px';
          cb.style.bottom = (base + pH + gap) + 'px';
        } catch { }
      }
      window.addEventListener('resize', adjustMobileButtons);
      window.addEventListener('orientationchange', adjustMobileButtons);
      setTimeout(adjustMobileButtons, 0);
      setTimeout(adjustMobileButtons, 200);
    })();
  </script>
</body>

</html>